<template>
	<view>
		<scroll-view scroll-y="ture" :style="{height:viewHeight+'px'}">
			<block v-for="(item,index) in msg" :key="index">
				<view :class="item.user==0?classmodel:classmodel1">
					<view v-if="item.user==0" class="midell">
					<view><image :src="pic"  @click="pict"></image></view>	
						<!-- 禁止图片被挤压问题 style="width: 80%;"-->
						<view>
							<text style="width: 85%;">{{item.usermsg}}</text>
						</view>
						
					</view>
					<view v-if="item.user==1" class="midell">
						<!-- 禁止图片被挤压问题 -->
						<text>{{item.usermsg}}</text>
						<image :src="userimg"></image> 
					</view>
				</view>
			</block>
		</scroll-view>
		<view class="in" v-if="!biaoqingshow">
			<view class="send">
				<text class="logoxiao icon iconfont icon-xiaolian" @click="biaoqing"></text>
				<input class="input " @input="changebt" v-model="username" style="background-color: #fefefe;" placeholder=" 这位朋友非常棒!" />
				<button class="btA" :class="{btB:btcolor}" @tap="send">发送</button>
			</view>

		</view>
		<!-- 表情 -->
		<view class="inbiao" v-if="biaoqingshow">
			<view class="sendbiao" >
				<text class="logoxiao icon iconfont icon-xiaolian" @click="biaoqing"></text>
				<input class="input " @input="changebt" v-model="username" style="background-color: #fefefe;" placeholder=" 这位朋友非常棒!" />
				<button class="btA" :class="{btB:btcolor}" @tap="send">发送</button>
			</view>
			<view style="margin-top: 75rpx;display: flex;justify-content: space-around; flex-direction: column;" >
				<view style="display: flex;justify-content: space-around;">
					<view style="font-size: 45rpx;" >😀</view>
					<view style="font-size: 45rpx;" >😁</view>
					<view style="font-size: 45rpx;" >😂</view>
					<view style="font-size: 45rpx;" >😰</view>
					<view style="font-size: 45rpx;" >😇</view>
				</view>
				<view style="display: flex;justify-content: space-around;">
					<view style="font-size: 45rpx;" >😌</view>
					<view style="font-size: 45rpx;" >😤</view>
					<view style="font-size: 45rpx;" >😡</view>
					<view style="font-size: 45rpx;" >👸</view>
					<view style="font-size: 45rpx;" >😱</view>
				</view>
				<view style="display: flex;justify-content: space-around;">
					<view style="font-size: 45rpx;" >😖</view>
					<view style="font-size: 45rpx;" >😴</view>
					<view style="font-size: 45rpx;" >💪</view>
					<view style="font-size: 45rpx;" >😣</view>
					<view style="font-size: 45rpx;" >😷</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入资料窗口
	export default {
		data() {

			return {
				classmodel: 'friedsleft',
				classmodel1: 'friedsright',
				viewHeight: 500,
				username: '',
				// php下次再写吧模拟数据
				robot: '',
				msg: [{
					user: 0,
					usermsg: ""
				}],
				pic: '',
				userimg: '',
				longpess: false,
				ai: false,
				usernamebug: '',
				// bt的颜色
				btcolor: false,

				// 表情
				biaoqingshow: false,
				// 下一个页面名字
				namenext:''
			}
		},
		methods: {
			// 按钮颜色改变
			changebt() {
				if (this.username) {
					this.btcolor = true
				}
				if (this.username.length == 0) {
					this.btcolor = false
				}

			},
			// 切换到表情
			biaoqing() {
				if(this.biaoqingshow==false)
				this.biaoqingshow = true
				else
				this.biaoqingshow = false
			},
			pict()
			{
					uni.navigateTo({
						url: "../me/me?pic="+this.pic+"&name="+this.namenext
					})
			},
			send() {
				if (this.username) {
					this.btcolor=false
					this.usernamebug = this.username
					this.username = ''
					let sendmsg = {
						user: 1,
						usermsg: this.usernamebug
					}
					this.robot = this.usernamebug
					this.msg.push(sendmsg)
					if (this.ai) {
						uni.request({
							url: "http://api.qingyunke.com/api.php",
							data: {
								key: 'free',
								appid: 0,
								msg: this.usernamebug
							},
							success: (e) => {
								let arrydate = e.data.content
								let robbotmsg = {
									user: 0,
									usermsg: arrydate
								};
								this.msg.push(robbotmsg);
							}
						})
					} else {
						// 模拟数据流
						setTimeout((e) => {
							let robbotmsg = {
								user: 0,
								usermsg: 'PHP为你存储(上线后会转发):' + this.robot
							};
							this.msg.push(robbotmsg);
						}, 1500)
					}
				} else {
					uni.showToast({
						icon: "none",
						title: '您还没输入呢'

					})
				}


			}
		},
		onLoad(option) {
			uni.getSystemInfo({
				success: (res) => {
					this.pic = option.pic
					this.namenext=option.name
					if (option.name == "Ai小助手") {
						this.ai = true
					}
					uni.setNavigationBarTitle({
						title: option.name
					})
					this.msg[0].usermsg = option.con
					let winheight = res.windowHeight - uni.upx2px(100)
					this.viewHeight = winheight

				}
			}),
			//#ifdef MP-WEIXIN
			uni.getStorage({
							key: "xiaochengxu",
							success: res => {
								let arrys = res.data
								this.userimg = arrys.avatarUrl
							}
			
						})
			// #endif
			//#ifdef APP-PLUS
			uni.getStorage({
				key: "userInfo",
				success: res => {
					let arrys = res.data
					this.userimg = arrys.avatarUrl
				}

			})
			// #endif
		},
		onNavigationBarButtonTap(val) {
			if (val.index == 0) {
				uni.navigateTo({
					url: "../me/me?pic="+this.pic+"&name="+this.namenext
				})
			}
		},
	}
</script>

<style lang="less">
	.friedsleft {
		width: 96%;
		margin: 2%;
		padding-bottom: 8px;
		display: flex;
		align-items: center;

		.midell {
			display: flex;
			align-items: center;

			image {
				width: 85rpx;
				height: 85rpx;
				border-radius: 22rpx;
			}

			text {
				margin-left: 10rpx;
				font-size: 26rpx;
				font-weight: bolder;
			}
		}

	}
	
	
	.friedsright {
		width: 96%;
		margin: 2%;
		padding-bottom: 8px;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.midell {
			display: flex;
			align-items: center;

			image {
				width: 85rpx;
				height: 85rpx;
				border-radius: 22rpx;
			}

			text {
				margin-right: 10rpx;
				font-size: 26rpx;
				font-weight: bolder;
			}
		}
	}


	// 输入框的颜色
	.in {
		background-color: #f1f1f1;
		width: 100%;
		position: fixed;
		bottom: 0%;
		left: 0;
		height: 80rpx;
		z-index: -1;
		border-radius: 20rpx 20rpx 0 0;
	}

	.send {
		height: 80rpx;
		position: fixed;
		bottom: 0%;
		left: 6%;
		font-size: 33rpx;
		display: flex;
		width: 92%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.input {
			border: 1rpx solid #D9D9D9;
			width: 70%;
			height: 100%;
			border-radius: 8rpx;
		}

		.logoxiao {
			margin-right: 2%;
			font-size: 55rpx;
		}

		.btA {
			background-color: #f0f0f0;
			color: white;
			font-size: 33rpx;
			height: 80rpx;
			margin-left: 1%;
		}

		.btB {
			background-color: #09BB07;
			color: white;
			font-size: 33rpx;
			height: 80rpx;
			margin-left: 1%;
		}
	}
	// 表情的一套
	
	.inbiao {
			background-color: #f1f1f1;
			width: 100%;
			position: fixed;
			z-index: -1;
			height: 26%;
			bottom: 0;
			left: 0;
			border-top: 1rpx dashed #faf4f4;
			border-radius: 40rpx 40rpx 0 0;
		}
		.sendbiao {
			height: 80rpx;
			position: fixed;
			bottom: 20%;
			left: 6%;
			font-size: 33rpx;
			display: flex;
			width: 92%;
			display: flex;
			align-items: center;
			justify-content: space-between;	
			.input {
				border: 1rpx solid #D9D9D9;
				width: 70%;
				height: 100%;
				border-radius: 8rpx;
			}
				
			.logoxiao {
				margin-right: 2%;
				font-size: 55rpx;
			}
				
			.btA {
				background-color: #f0f0f0;
				color: white;
				font-size: 33rpx;
				height: 80rpx;
				margin-left: 1%;
			}
				
			.btB {
				background-color: #09BB07;
				color: white;
				font-size: 33rpx;
				height: 80rpx;
				margin-left: 1%;
			}
		}
</style>
